<template>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="案例标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入案例标题" />
        </el-form-item>

   <el-form-item label="分类" prop="classification">
          <el-select v-model="form.classification" placeholder="请选择分类" clearable>
          <el-option
            v-for="classificationList in classificationList"
            :key="classificationList.caseId"
            :label="classificationList.name"
            :value="classificationList.name"
          />
        </el-select>
        </el-form-item>

             <el-form-item label="润笔老师" prop="teacher">
          <el-input v-model="form.teacher" placeholder="请输选择润笔老师" />
        </el-form-item>
        <el-form-item label="图片" prop="mapImage">
          <image-upload v-model="form.mapImage"/>
        </el-form-item>
              <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.mhrb_status"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item label="浏览注水" prop="browseFilling">
           <el-input-number v-model="form.browseFilling" :precision="2" :step="0.1" :max="100"></el-input-number>
          <!-- <el-input v-model="form.browseFilling" placeholder="请输入浏览注水" /> -->
        </el-form-item>
        <el-form-item label="热度注水" prop="heatFilling">
          <el-input-number v-model="form.heatFilling" :precision="2" :step="0.1" :max="100"></el-input-number>
          <!-- <el-input v-model="form.heatFilling" placeholder="请输入热度注水" /> -->
        </el-form-item>
   
        
      </el-form>
      <quill-editor v-model="form.preview" ></quill-editor>
        <div slot="footer" class="dialog-footer">
  
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      


    </div>
</template>
<script>
import { addCaseLists} from "@/api/mhrb/cases/caseLists";
import { listClassification} from "@/api/mhrb/cases/classification";

import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
   components: {
    quillEditor
  },
      dicts: ['mhrb_status'],
    name: 'caseListDetail',
    data() {
        return {
           content: '',
      value: '',
    classificationList:[],
    // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 案例列表表格数据
      caseListsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层


  // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "案例标题不能为空", trigger: "blur" }
        ],
        classification: [
          { required: true, message: "分类不能为空", trigger: "blur" }
        
        ],
        status: [
          { required: true, message: "状态", trigger: "change" }
        ],
        timeDate: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        browseFilling: [
          { required: true, message: "浏览注水不能为空", trigger: "blur" },
        ],
        heatFilling: [
          { required: true, message: "热度注水不能为空", trigger: "blur" }
        ],
        teacher: [
          { required: true, message: "老师不能为空", trigger: "blur" }
        ],
        mapImage: [
          { required: true, message: "图片不能为空", trigger: "blur" }
        ],
        number: [
          { required: true, message: "案例编号不能为空", trigger: "blur" }
        ]
      }

        }
    },
    methods: {


 getList() {
      this.loading = true;
      listClassification(this.queryParams).then(response => {
        this.classificationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

           /** 新增按钮操作 */
        handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加案例分类";
        },
           // 取消按钮
    cancel() {
      this.open = false;
     this.$router.push("/case/caseLists");
    },

   /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
         
      if (this.form.caseId == null) {
                 addCaseLists(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            
            });
             this.$router.push("/case/caseLists");
      }

          }
      });
    },

    },
    // 创建
    created() {
        
    },
    // 挂载
    mounted() {
  this.getList()
    },
    // 销毁
    destroyed (){

    }

}
</script>
<style scoped>

</style>